<template>
    <div class="recommend">
        <div class="slideshow">
            <div class="swiper-conatainer" ref="swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="val in slider" :key="val.id">
                        <img :src="val.picUrl" alt="">
                    </div>
                </div>
                <div class="swiper-pagination" ref="pagination"></div>
            </div> 
        </div> 
        <h1>热门歌单推荐</h1>
        <div class="hot">
            <ul>
                <li @click="show(item)" v-for="item in hostlist" :key="item.dissid">
                    <img :src="item.imgurl" alt="">
                    <div class="hotname">
                        <h2 @click="getSongList(item.dissid)">{{item.creator.name}}</h2>
                        <p>{{item.dissname}}</p>
                    </div>
                    
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { getRecommend } from '@/api/recommend.js'
import { getDiscList, getSongList } from '@/api/recommend.js'
import swiper,{ Pagination, Autoplay } from 'swiper'
import 'swiper/swiper-bundle.css'
swiper.use([Pagination, Autoplay])

export default {
    data(){
        return{
            slider: [],
            hostlist: []
        }
    },
    computed: {
        ...mapState(['item', 'alertFlag']),
    },
    mounted(){
        getRecommend()
        .then(res => {
            this.slider = res.data.slider;
            this.$nextTick(()=>{
                new swiper(this.$refs.swiper, {
                    autoplay:{
                        delay: 1000,
                        disableOnInteraction: false,
                    },
                    loop:true,
                    pagination:{
                        el:this.$refs.pagination
                    }
                })
            })
        })
        getDiscList()
        .then(res => {
            this.hostlist = res.data.list;
        })
    },
    methods:{
        ...mapMutations(['gititem', 'changeAlert', 'setPublicAlertFlag', 'setimg', 'getalertlist']),
        async show(item){
            this.setimg(item.imgurl)
            this.gititem(item)
            this.setPublicAlertFlag(true)
            this.gititem(item)
            let res = await getSongList(item.dissid)
            this.getalertlist(res.cdlist[0].songlist)
        }
    }
}
</script>

<style lang="scss" scoped>
.recommend{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.slideshow{
    width: 100%;
    height: 150px;
    position: relative;
    z-index: -1;
    .swiper-conatainer{
        width: 100%;
        height: 150px;
        img{
            width: 100%;
            height: 150px;
        }
    }
}
/deep/ .swiper-pagination-bullet{
    background:hsla(0,0%,100%,.5);
    transition: opacity .5s, background-color .5s, width .5s;
}
/deep/ .swiper-pagination-bullet-active{
    background: #fff;
    width: 20px;
    border-radius: 20px;
}
h1{
    width: 100%;
    height: 65px;
    background:#222222 ;
    color: #ffcd32;
    font-size: 14px;
    text-align: center;
    line-height: 65px;
}
.hot{
    background: center#222222;
    flex: 1;
    img{
        width: 60px;
        height: 60px;
        margin-right: 20px;
    }
    h2{
        color: #fff;
        margin-bottom: 10px;
    }
    p{
        color: hsla(0,0%,100%,.3);
    }
    li{
        display: flex;
        padding: 0 20px 20px;
    }
}
</style>